<template>
  <div className="wrapper" style="width: 340px;">
    <div ref="chartDiv" style="width: 340px;height:400px;"></div>
    <div ref="chartDiv2" style="width: 340px;height:400px;margin-bottom: 10px;padding-bottom: 20px"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';
import server from "@/utils/axiosUtils.js";
import { auto } from '@popperjs/core';
const chartDiv = ref(null);
const chartDiv2 = ref(null);
onMounted(()=>{

  showChart(chartDiv.value,'/hospital/rank')
  showChart(chartDiv2.value,'/setmeal/rank')
  //
})
function showChart(dom,url){
  server({
    url: url,
    method: 'get'
  }).then(res=>{
    var myChart = echarts.init(dom);
    var option;
    const data = res.data;
    option = {
      xAxis: {
        type: 'category',
        data: data.map(item=>item.name),
        axisLabel: {
          interval: auto, 
          rotate:20,
          formatter: function (value, index) {  
          
      // 这里可以返回简化后的标签值  
      let formattedValue = '';  
    let charCount = 0;  
   if(value.length > 8)formattedValue+='\n';
    // 遍历value的每个字符  
    for (let i = 0; i < value.length; i++) {  
      // 当字符数达到5或者到达字符串末尾时，进行换行或结束  
      if (charCount ===8  && i < value.length - 1) {  
        formattedValue += '\n'; // 插入换行符  
        charCount = 0; // 重置字符计数器  
      }  
  
      formattedValue += value[i]; // 将字符添加到格式化后的字符串  
      charCount++; // 字符计数器递增  
    }  
    return formattedValue;  
    } 
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.map(item=>item.total),
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {  
            color: 'rgb(98 190 150)' // 设置条形的颜色  
            // 如果你想根据数据动态设置颜色，可以使用函数  
            // color: function (params) {  
            //   // params 是数据项和数据系列的信息  
            //   // 假设根据值的大小改变颜色  
            //   if (params.value > 15) {  
            //     return '#F56C6C'; // 红色  
            //   } else {  
            //     return '#409EFF'; // 蓝色  
            //   }  
            // }  
          }  
        }
      ]
    };

    option && myChart.setOption(option);
  })
}
</script>

<style scoped>
@import "@/assets/css/hospital.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";

body{
  scale: 1;
}

.input-box {
  padding: 5vh 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #f2f2f2;
}

.tip{
  width: 80%;
  font-size: small;
  background-color: #c5c5c5;
  color: #FFFFFF;
  padding: 1vw;
}

.ai-message, .user-message{
  font-size: 3vh;
  box-shadow: 0 0 1vw 0 rgba(0, 0, 0, 0.3);
  margin: 2vh 5vw;
  padding: 1.25vh;
  border-radius: 1vw;
}

.ai-message-item, .user-message-item{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: stretch
}

.myicon{
  scale: 100%;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
}
</style>